<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue监测数据改变的原理_数组</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        Vue监视数据的原理:
            1.vue会监视data中所有层次的数据。

            2。如何监测对象中的数据?
                通过setter实现监视,且要在new Vue时就传入要监测的数据。
                    (1).对象中后追加的属性，Vue默认不做响应式处理
                    (2).如需给后添加的属性做响应式，请使用如下API:
                    vue.set(target.propertyName/index，value）或
                    vm.$set(target.propertyName/index,value)

            3。如何监测数组中的数据?
                通过包裹数组更新元素的方法实现,本质就是做了两件事:
                    (1).调用原生对应的方法对数组进行更新。
                    (2).重新解析模板,进而更新页面。

            4.在Vue修改数组中的某个元素一定要用如下方法:
                1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
                2.Vue.set()或vm.$set()
            
            特别注意:Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性!!! 
    -->

    <div id="app">
        <h2>学校信息</h2>
        <h3>学校名称:{{name}}</h3>
        <h3>学校地址:{{address}}</h3>
        <hr/>

        <h2>学生信息</h2>
        <button @click="addSex">点击添加一个信息属性，默认是男</button>
        <h2>姓名:{{student.name}}</h2>
        <h2 v-if="student.sex">性别:{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}}，对外：{{student.age.sAge}}</h2>
        <h2>爱好</h2>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
    <script>
    //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               name: '尚硅谷',
               address: '北京',
               student: {
                   name: 'tom',
                   age: {
                       rAge: 35,
                       sAge: 36
                   },
                   hobby: ['篮球','音乐','编程'],
                   friends: [
                       {name: 'jack',age: 18},
                       {name: 'tony',age: 22}
                   ]
               }
           },
           methods: {
                addSex(){
                    //Vue.set(this.student,'sex','男');
                    this.$set(this.student,'sex','女');
                }
           },
        });
    </script>
</body>

</html>